<template>
  <div v-if="restaurant">
    <!-- 餐厅主图 -->
    <el-image :src="restaurant.image" style="width: 100%; height: 300px; object-fit: cover;" />

    <h2>{{ restaurant.name }}</h2>
    <p>{{ restaurant.description }}</p>
    <h3>菜品列表</h3>
    <el-row :gutter="20">
      <el-col v-for="dish in restaurant.menu" :key="dish.name" :span="8">
        <el-card>
          <!-- 菜品图片 -->
          <img :src="dish.image" alt="" style="width: 100%; height: 150px; object-fit: cover;" />

          <!-- 菜品信息容器 -->
          <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
            <h4 style="margin: 0;">{{ dish.name }}</h4>
            <p style="margin: 0;">价格: ￥{{ dish.price }}</p>
          </div>
        </el-card>
      </el-col>

    </el-row>

    <el-divider></el-divider>

    <h3>用户评分与评价</h3>
    <el-table :data="restaurant.reviews" style="width: 100%">
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="rating" label="评分"></el-table-column>
      <el-table-column prop="comment" label="评论"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'RestaurantDetailPage',
  data() {
    return {
      restaurants: [
        {
          id: 1,
          name: '蒸川味',
          image: '/images/image1.jpg',
          description: '主打川菜的餐厅。',
          menu: [
            { name: '回锅肉', price: 288, image: '/images/dish1.jpg' },
            { name: '干烧鱼', price: 128, image: '/images/dish2.jpg' },
          ],
          reviews: [
            { username: '花', rating: 5, comment: '很棒的餐厅！' },
            { username: '小仓梦', rating: 4, comment: '菜品很新鲜！' },
          ],
        },
        {
          id: 2,
          name: '麦当劳',
          image: '/images/image2.jpg',
          description: 'McDonald',
          menu: [
            { name: '枫糖松饼汉堡', price: 15, image: '/images/dish3.jpg' },
            { name: '猪肉满福堡', price: 25, image: '/images/dish4.jpg' },
          ],
          reviews: [
            { username: '曾经的我', rating: 5, comment: '汉堡very juice' },
            { username: '华生', rating: 3, comment: '环境一般，但味道不错。' },
          ],
        },
        {
          id: 3,
          name: '椒麻鸡火锅',
          image: '/images/image3.jpg',
          description: '老式火锅的秘密基地。',
          menu: [
            { name: '肥牛卷', price: 15, image: '/images/dish5.jpg' },
            { name: '海带', price: 25, image: '/images/dish6.jpg' },
          ],
          reviews: [
            { username: '友人a', rating: 5, comment: '海带还行, 牛肉一绝' }
          ],
        },
      ],
      restaurant: null,
    };
  },
  created() {
    const restaurantId = 3; // You can set this dynamically from routing or any other mechanism
    this.restaurant = this.restaurants.find((r) => r.id === restaurantId);
  },
};
</script>